<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../js/css.js"></script>
    <link rel="stylesheet" href="../css/style-zj.css">
    <link rel="stylesheet" href="../css/swiper.min.css">
    <link rel="stylesheet" href="../css/mui.min.css">
    <!--swiper-css-->
    <style>
        .swiper-pagination-bullet {
            background: #c1c1c1;
        }
        .swiper-pagination-bullet-active {
            opacity: 1;
            background: white;
        }
        .mui-preview-image.mui-fullscreen {
            position: fixed;
            z-index: 20;
            background-color: #000;
        }
        .mui-preview-header,
        .mui-preview-footer {
            position: absolute;
            width: 100%;
            left: 0;
            z-index: 10;
        }
        .mui-preview-header {
            height: 44px;
            top: 0;
        }
        .mui-preview-footer {
            height: 50px;
            bottom: 0px;
        }
        .mui-preview-header .mui-preview-indicator {
            display: block;
            line-height: 25px;
            color: #fff;
            text-align: center;
            margin: 15px auto 4;
            width: 70px;
            background-color: rgba(0, 0, 0, 0.4);
            border-radius: 12px;
            font-size: 16px;
        }
        .mui-preview-image {
            display: none;
            -webkit-animation-duration: 0.5s;
            animation-duration: 0.5s;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
        }
        .mui-preview-image.mui-preview-in {
            -webkit-animation-name: fadeIn;
            animation-name: fadeIn;
        }
        .mui-preview-image.mui-preview-out {
            background: none;
            -webkit-animation-name: fadeOut;
            animation-name: fadeOut;
        }
        .mui-preview-image.mui-preview-out .mui-preview-header,
        .mui-preview-image.mui-preview-out .mui-preview-footer {
            display: none;
        }
        .mui-zoom-scroller {
            position: absolute;
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            -webkit-box-align: center;
            -webkit-align-items: center;
            align-items: center;
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            width: 100%;
            height: 100%;
            margin: 0;
            -webkit-backface-visibility: hidden;
        }
        .mui-zoom {
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
        }
        .mui-slider .mui-slider-group .mui-slider-item img {
            width: auto;
            height: auto;
            max-width: 100%;
            max-height: 100%;
        }
        .mui-android-4-1 .mui-slider .mui-slider-group .mui-slider-item img {
            width: 100%;
        }
        .mui-android-4-1 .mui-slider.mui-preview-image .mui-slider-group .mui-slider-item {
            display: inline-table;
        }
        .mui-android-4-1 .mui-slider.mui-preview-image .mui-zoom-scroller img {
            display: table-cell;
            vertical-align: middle;
        }
        .mui-preview-loading {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            display: none;
        }
        .mui-preview-loading.mui-active {
            display: block;
        }
        .mui-preview-loading .mui-spinner-white {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -25px;
            margin-top: -25px;
            height: 50px;
            width: 50px;
        }
        .mui-preview-image img.mui-transitioning {
            -webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
            transition: transform 0.5s ease, opacity 0.5s ease;
        }
        @-webkit-keyframes fadeIn {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }
        @keyframes fadeIn {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }
        @-webkit-keyframes fadeOut {
            0% {
                opacity: 1;
            }
            100% {
                opacity: 0;
            }
        }
        @keyframes fadeOut {
            0% {
                opacity: 1;
            }
            100% {
                opacity: 0;
            }
        }
        p img {
            max-width: 100%;
            height: auto;
        }
    </style>
</head>
<body class="bg_fe">
<header><a class="icon_back"></a>云家故事</header>
<div class="head_height"></div>
<div class="container product-detail mart-0 pb_10" v-cloak="">
    <div class="bg_white">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="item in bannerList" @click="jumpPic(item.id)">
                    <div class="swiper-c">
                        <img :src="imgBaseurl + item.picId" alt="">
                    </div>
                </div>
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination" style="bottom: 20px"></div>
        </div>
        <div class="title-top pro-det-c">
            <span>{{store.name}}</span>
            <i class="fr png fenxiang-icon"></i>
        </div>
        <div class="pro-det-c">
            <span class="color-gray">{{store.intro}}</span>
        </div>
        <div class="detail-c">
            <div class="li-detail li-2 width-auto">
                <div class="text-1" @click="toMap(store.lat,store.lit,store.name,store.address)">
                    <i class="dinwei-icon"></i>
                    <span class="marl-13">{{store.address}}</span>
                    </div>
                <i class="li-detail fr phone-icon" :phone="store.phone"></i>
            </div>

        </div>
    </div>
    <div class="recommend-pro">
        <i class="icon_recommend"></i>
        <span>推荐产品</span>
        <a class="fr color-97" @click="jumpList(store.id)">全部&nbsp;></a>
    </div>
    <div class="png-list pro-det-c">
        <div class="item marb-10" v-for="item in productList" @click="jumpDetail(item.id)">
            <img :src="imgBaseurl + item.picId" alt="">
            <div class="marb-5">{{item.name}}</div>
            <div class="">
                <span class="price-t color-red">￥{{item.nowPrice}}</span>
                <span class="color-gray line-t">￥{{item.price}}</span>
                <span class="fr color-gray1">已售{{item.saleNum}}</span></div>
        </div>
    </div>
    <div class="recommend-pro">
        <i class="icon_demo"></i><span>最新案例</span>
    </div>
    <div class="png-list pro-det-c">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="item in storeCaseList" @click="jumpPic(item.id)">
                    <div class="swiper-c">
                        <img :src="imgBaseurl + item.picId" alt="" data-preview-src="" data-preview-group="1">
                    </div>
                </div>
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination" style="bottom: 20px"></div>
        </div>
    </div>
</div>

</body>
<script src="../js/config.js"></script>
<script src="../js/swiper.min.js"></script>
<script src="../js/mui.min.js"></script>
<script src="../js/mui.zoom.js"></script>
<script src="../js/mui.previewimage.js"></script>
<script>
//    mui.init();
    var storeId = getUrlParam("storeId");
    var app = new Vue({
        el: '.container',
        data: {
            imgBaseurl:imgBaseurl,
            bannerList:'',
            store:'',
            productList:'',
            storeCaseList:'',
        },
        beforeCreate: function () {
            var that = this;
            get_ajax("store/getStoreDetail", {storeId:storeId}, function (data) {
                app.bannerList = data.bannerList;
                app.store = data.store;
                app.productList = data.productList;
                app.storeCaseList = data.storeCaseList;
            });
        },
        updated: function () {
            var swiper = new Swiper('.swiper-container', {
                autoplay:false,
                pagination: {
                    el: '.swiper-pagination',
                },
            });
            mui.previewImage();
        },
        methods:{
            jumpDetail:function (id) {
                location.href='product.html?productId='+id;
            },
            jumpPic:function (id) {
//                location.href='product.html?productId='+id;
            },
            jumpList:function (id) {
                location.href='product_list.html?storeId='+id;
            },
            toMap:function (lat,lit,name,adress) {
                window.location.href= 'http://apis.map.qq.com/uri/v1/marker?marker=coord:'+lat+','+lit+';title:'+name+';addr: '+adress+'';
            }
        }
    })



</script>
</html>